<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位和绝对定位</title>
		<!-- 定位，将元素正确布局
		     1.浮动定位：左右布局
			 2.相对定位：微调布局针对单一元素 
			 position：relative;元素进行相对定位
			 特点：相对于父级进行定位，不脱离文档流
			 附加属性：方向属性：left\top\right\bottom
			 属性值：正负数值px 
			        Z轴叠加属性：z-index-属性值：数值，数值越大，越靠前
			 3.绝对定位：叠加效果，通常与相对定位搭配使用，左栏、侧边栏、遮罩层
			            左栏--挂靠点
			 position:absolute;声明元素技能型绝对定位
			 特点：相对于祖先【页面左上顶角】进行定位、如果有父元素，按照父元素【坐上顶角、脱离文档流】
			 使用方法：通常与相对定位搭配使用
			 4.固定定位：fiexd 页面区域固定在页面上
			 相对、绝对、固定属性--附加属性全部通用：方向、叠加属性
			 5.文档流定位：按照元素分类进行定位：块与块【纵排】
			                                  行与行【横排】
											  块与行【横排】-->
		<style>
			/* box1 box2 300*300 */
			div{
				width: 300px;
				height: 300px;
				
			}
			div.box1{
				background:url(img/img-5.gif);
				background-size: 100%;
				/* 相对定位，相对就近父级 */
				position: relative;
				left: 0px;
				top:0px;
				/* 叠加属性 */
				z-index:100;
			}
			div.box2{
				background:url(img/03ecc272fd404fb1b6062147375ba679.gif);
				background-size: 100%;
				position: relative;
				left: 0px;
				top: 0px;
				z-index:101;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>